import { getCurrentHistory, pageBack } from '@packages/lib-history';
import os from '@packages/lib-os';

import Touch from '../modules/Touch/core';

function moveBack() {
    WPT.move = {
        ...WPT.move,
        isMove: false,
    };
    pageBack();
}

/**
 * 是否禁止手势返回
 * @returns
 */
function checkDisable() {
    // 判断是不是第一个页面
    if (getCurrentHistory().index == 0) {
        return (os.wpt && os.ios) || window.location.pathname === '/home';
    }
    return false;
}

class SliceMove {
    constructor() {
        this.initSilde();
        let disableSwipe = false;
        new Touch(document.body, {
            preventDefault: false,
            ingoreTouchElement: [
                'slick-slider', // 轮播组件
                'wpt-swipe',
                'wpt-swiper-disable-lr-prev', // Swiper组件非第一页时阻止页面手势返回
            ],
        })
            .on('start', (state) => {
                const { y } = state.start;

                // ios App 的第一个页面禁用手势返回
                disableSwipe = checkDisable();
                if (this.slideWrap) {
                    this.slideWrap.style.top = `${y - 100}px`;
                }
            })
            .on('change', (change, state, e) => {
                if (state.direction !== 'lr' || disableSwipe) {
                    return;
                }
                const x = Math.max(change.x, 0);
                if (x > 0) {
                    e.preventDefault();
                }
                const bw = x / 5;
                this.slideDiv.style.width = `${bw}px`;
                this.slideDiv.style.height = `${200 - x / 3.3}px`;
                if (bw > 20) {
                    this.imgleft.style.display = 'inline-block';
                } else {
                    this.imgleft.style.display = 'none';
                }
            })
            .on('end', (change, done, state) => {
                done();
                this.slideDiv.style.width = '0px';
                this.imgleft.style.display = 'none';

                if (disableSwipe) return;
                const direction = state.direction;
                if (direction === 'lr' && change.x > 100) {
                    moveBack();
                }
            });
    }

    // ios 微信环境下，初始化一个silde手势边界div
    initSilde = () => {
        this.slideWrap = document.createElement('div');
        this.slideWrap.style.cssText = `
            position:fixed;
            height:200px;
            left:0;
            z-index:9999;
            display:flex;
            align-items:center;
        `;
        this.slideDiv = document.createElement('div');
        this.imgleft = document.createElement('img');
        this.imgleft.src = 'https://cdn.weipaitang.com/static/20191218b47ce633-53fd-e63353fd-c00b-5345ef21a902-W17H32';
        this.imgleft.style.cssText = `
            width:10px;
            height:20px;
            display:none;
        `;
        this.slideDiv.style.cssText = `
            width:0;
            height:200px;
            background: url(https://cdn.weipaitang.com/static/2019121808df9be1-82c2-9be182c2-7a74-76514f6ee9ff-W100H159) no-repeat;
            background-size: 100% 100%;
            text-align:center;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        `;
        this.slideDiv.appendChild(this.imgleft);
        this.slideWrap.appendChild(this.slideDiv);
        document.body.appendChild(this.slideWrap);
    };
}

// eslint-disable-next-line no-new
new SliceMove();
